<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex">
          <el-col>传智教育 </el-col>
          <el-col :span="3">负责人</el-col>
          <el-col :span="3">
            <el-dropdown>
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>添加部门</el-dropdown-item>
                  <el-dropdown-item disabled>编辑部门</el-dropdown-item>
                  <el-dropdown-item divided>删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-card>
      <el-tree :data="data" :props="defaultProps" class="tree" />

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }]
    }
  } }
</script>

<style scoped lang="scss">
.app-container{
  width: 800px;
  margin: 0 auto;
}
.el-dropdown-link{
  font-size: 14px;
  color: #ccc;
}
.tree{
  margin-top: 10px;
}
</style>
